<template>
	<div id="AlarmSetting-main" class="ModalStyle">
		<div class="selectBox">
			<Select v-model="equipment" style="width:200px" @on-change="searchEquipment">
				<Option v-for="item in equipmentList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
			<Select v-model="server" style="width:200px" @on-change="searchServer">
				<Option v-for="item in serverList" :value="item.osInfo" :key="item.sId">{{ item.osInfo }}</Option>
			</Select>
			<Button style="" type="primary" class="large" @click="delSerch">刷新</Button>
		</div>
		<a class="sensorLis" href="javascript:;" @click="add()">
			<div class="imgBox"><img src="../../../static/images/add.png" alt=""></div>
			<div class="LisText"><span class="LisAdd">新增告警</span></div>
		</a>
		<ul class="content">
			<li v-for="(item, index) in alarmList" :key="index">
				<div class="top">
					<div class="ImgBox"><img :src="item.equipmentImg" alt=""></div>
					<div class="topName">
						<h4>{{item.equipment}}</h4>
						<span>服务器：{{item.serverName}}</span>
					</div>
				</div>
				<div class="bottom">
					<div class="bottomText">
						<div class="icon">
							<img src="../../../static/images/lightning.png" alt="">
							<span>报警条件</span>
						</div>
						<span style="margin-left: 20px;font-weight: bold">{{item.alarmtype}}</span>
						<Icon type="ios-settings" style="opacity:0 " />
					</div>
					<div class="bottomText">
						<div class="icon">
							<img src="../../../static/images/lightning1.png" alt="">
							<span>报警方式</span>
						</div>
						<span style="margin-left: 20px;font-weight: bold">发送{{item.contact}}给{{item.alarmContactsName}}</span>
						<div class="delCheck">
							<div class="Modify" @click="check(item)"></div>
							<div class="del" @click="del(item.uid)"></div>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<!-- 删除报警设置 -->
		<Modal v-model="delectAlarm" title="删除告警" @on-ok="delAlarm" @on-cancel="cancelDel" :mask-closable="false">
			是否删除该告警
		</Modal>
		<!--报警设置-->
		<Modal v-model="modify" title="报警设备" footer-hide :closable="false" :mask-closable="false">
			<p slot="header" style="font-size: 24px;display: flex;align-items: center;">
				<img src="../../../static/images/set.png" alt="" style="width: 6%;height: auto;margin-right: 20px">
				<span style="color: #000;font-weight: normal">报警设备</span>
			</p>
			<div class="Modal">
				<div class="top" style="height: 100px;border:none;margin-bottom: 20px">
					<div class="ImgBox">
						<img :src="editImg" alt="">
					</div>
					<div class="topName">
						<h4>{{ModifyArr.equipmentValue}}</h4>
						<span>服务器：{{ModifyArr.serverName}}</span>
					</div>
				</div>
				<Form ref="Modify" :model="ModifyArr" :rules="ruleValidate1" id="myform1" resetFields>
					<FormItem prop="policeCond">
						<Select v-model="ModifyArr.policeCond" style="width:100%" @on-change="getselect">
							<Option class="Options" v-for="(item, index) in alarmTypeList" :key="index" :value="item.value">{{item.label}}</Option>
						</Select>
					</FormItem>
					<div class="input">
						<FormItem prop="thresholdX" v-if="showX">
							<Input v-model="ModifyArr.thresholdX" placeholder="请设置X值" style="width: 150px" />
						</FormItem>
						<FormItem prop="thresholdY" v-if="showY">
							<Input v-model="ModifyArr.thresholdY" placeholder="请设置Y值" style="width: 150px" />
						</FormItem>
						<FormItem prop="thresholdM" v-if="showM">
							<Input v-model="ModifyArr.thresholdM" placeholder="请设置M值" style="width: 150px" />
						</FormItem>
					</div>
					<div class="line"></div>
					<div class="push">
						<ul class="pushSelect">
							<li v-for="(item, index) in imgSrcLis" :key="index" @click="toggleLi(item.value)">
								<img :src="ModifyArr.policeType === item.value ? ImgArr[index].selected : ImgArr[index].normal" alt="">
								<span>{{item.label}}</span>
							</li>
						</ul>
						<FormItem prop="policePerson">
							<Select v-model="ModifyArr.policePerson" style="width:100%" @on-change="getselect1()" placement="top" placeholder="请选择联系人">
								<Option class="Options" v-for="(item, index) in peopleList" :key="index" :value="item.username">{{item.username}}</Option>
							</Select>
						</FormItem>
					</div>
					<div class="from-btn">
						<Button type="primary" @click="handleSubmit('Modify')" style="background: #d00210;border-color: #d00210">保存</Button>
						<Button type="primary" @click="cancel1()">取消</Button>
					</div>
				</Form>
			</div>
		</Modal>
		<!--新增-->
		<Modal v-model="newPolice" title="新增报警" footer-hide :closable="false" :mask-closable="false">
			<p slot="header" style="font-size: 24px;display: flex;align-items: center;">
				<img src="../../../static/images/add2.png" alt="" style="width: 6%;height: auto;margin-right: 20px">
				<span style="color: #000;font-weight: normal">新增报警</span>
			</p>
			<div class="Modal">
				<Form ref="AddArr" :model="AddArr" :rules="ruleValidate" id="myform" resetFields>
					<FormItem prop="serverName">
						<Select v-model="AddArr.serverName" style="width:100%" @on-change="getServerId" placeholder="请选择服务器">
							<Option class="Options" v-for="(item, index) in serverList" :key="index" :value="item.osInfo">{{item.osInfo}}</Option>
						</Select>
					</FormItem>
					<FormItem prop="equipmentValue">
						<Select v-model="AddArr.equipmentValue" style="width:100%;margin: 20px 0 0 0;" placeholder="请选择告警设备">
							<Option class="Options" v-for="(item, index) in equipmentList" :key="index" :value="item.value">{{item.label}}</Option>
						</Select>
					</FormItem>
					<FormItem prop="policeCond">
						<Select v-model="AddArr.policeCond" style="width:100%;margin: 20px 0 0 0;" @on-change="getselect3" placeholder="请选择报警条件">
							<Option class="Options" v-for="(item, index) in alarmTypeList" :key="index" :value="item.value">{{item.label}}</Option>
						</Select>
					</FormItem>
					<div class="input">
						<FormItem prop="thresholdX" v-if="showXX">
							<Input v-model="AddArr.thresholdX" placeholder="请设置X值" style="width: 150px" />
						</FormItem>
						<FormItem prop="thresholdY" v-if="showYY">
							<Input v-model="AddArr.thresholdY" placeholder="请设置Y值" style="width: 150px" />
						</FormItem>
						<FormItem prop="thresholdM" v-if="showMM">
							<Input v-model="AddArr.thresholdM" placeholder="请设置M值" style="width: 150px" />
						</FormItem>
					</div>
					<FormItem>
						<div class="line"></div>
					</FormItem>
					<FormItem>
						<div class="push">
							<ul class="pushSelect">
								<li v-for="(item, index) in imgSrcLis" :key="index" @click="toggleLi1(item.value)">
									<img :src="AddArr.policeType === item.value ? ImgArr[index].selected : ImgArr[index].normal" alt="">
									<span>{{item.label}}</span>
								</li>
							</ul>
							<FormItem prop="policePerson" style="margin-bottom: 70px">
								<Select v-model="AddArr.policePerson" style="width:100%" @on-change="getselect4" placeholder="请选择联系人" placement="top">
									<Option class="Options" v-for="(item, index) in peopleList" :key="index" :value="item.username">{{item.username}}</Option>
								</Select>
							</FormItem>
						</div>
					</FormItem>
					<div class="from-btn">
						<Button type="primary" @click="AddhandleSubmit('AddArr')" style="background: #d00210;border-color: #d00210">保存</Button>
						<Button type="primary" @click="cancel()">取消</Button>
					</div>
				</Form>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		name: 'AlarmSetting',
		data () {
			return {
				oId: 1,
				// 新增下拉控制标识
				showXX: false,
				showYY: false,
				showMM: false,
				// 修改下拉控制标识
				showX: false,
				showY: false,
				showM: false,
				// 设备id
				deviceId: '',
				// 修改页面的对话框控制
				modify: false,
				newPolice: false,
				// 联系人下拉
				peopleList: [],
				// 新增报警设备
				AddArr: {
					// 报警条件
					policeCond: '',
					thresholdX: 0,
					thresholdY: 0,
					thresholdM: 0,
					// 报警人
					policePerson: '',
					// 服务器id
					serverId: 0,
					// 服务器名称
					serverName: '',
					// 报警方式
					policeType: 'WECHAT',
					// 报警人id
					id: 0,
					// 告警设备
					equipmentValue: ''
				},
				// 新增表单验证
				ruleValidate: {
					serverName: [{
						required: true,
						message: '请选择属性',
						trigger: 'change'
					}],
					equipmentValue: [{
						required: true,
						message: '请选择属性',
						trigger: 'change'
					}],
					policeCond: [{
						required: true,
						message: '请选择属性',
						trigger: 'change'
					}],
					thresholdX: [{
						required: true,
						message: '内容不能为空',
						trigger: 'blur'
					}],
					thresholdY: [{
						required: true,
						message: '内容不能为空',
						trigger: 'blur'
					}],
					thresholdM: [{
						required: true,
						message: '内容不能为空',
						trigger: 'blur'
					}],
					policePerson: [{
						required: true,
						message: '请选择属性',
						trigger: 'change'
					}]
				},
				// 修改表单验证
				ruleValidate1: {
					policeCond: [{
						required: true,
						message: '请选择属性',
						trigger: 'change'
					}],
					thresholdX: [{
						required: true,
						message: '内容不能为空',
						trigger: 'blur'
					}],
					thresholdY: [{
						required: true,
						message: '内容不能为空',
						trigger: 'blur'
					}],
					thresholdM: [{
						required: true,
						message: '内容不能为空',
						trigger: 'blur'
					}],
					policePerson: [{
						required: true,
						message: '请选择属性',
						trigger: 'change'
					}]
				},
				// 图片选中
				ImgArr: [
					{
						normal: require('../../../static/images/wechat.png'),
						selected: require('../../../static/images/wechat-1.png')
					},
					{
						normal: require('../../../static/images/SMS.png'),
						selected: require('../../../static/images/SMS-1.png')
					},
					{
						normal: require('../../../static/images/at.png'),
						selected: require('../../../static/images/at-1.png')
					}
				],
				imgSrcLis: [
					{
						value: 'WECHAT',
						label: '微信'
					},
					{
						value: 'MSM',
						label: '短信'
					},
					{
						value: 'MAIL',
						label: '邮箱'
					}
				],
				// 修改之后设备信息
				ModifyArr: {
					// 报警条件
					policeCond: '',
					thresholdX: 0,
					thresholdY: 0,
					thresholdM: 0,
					// 报警方式
					policeType: '',
					// 报警人
					policePerson: '',
					// 服务器id
					serverId: 0,
					// 服务器名称
					serverName: '',
					// 报警人id
					id: 0,
					// 告警设备
					equipmentValue: ''
				},
				// 下拉选择设备
				equipment: '',
				// 设备列表
				equipmentList: [
					{
						value: 'CPU_ALARM',
						label: 'cpu警告',
						imgSrc: '../../../static/images/cpu.png'
					},
					{
						value: 'MEMORY_ALARM',
						label: '内存警告',
						imgSrc: '../../../static/images/memory.png'
					},
					{
						value: 'DISK_ALARM',
						label: '硬盘警告',
						imgSrc: '../../../static/images/disk.png'
					},
					{
						value: 'NET_ALARM',
						label: '网络警告',
						imgSrc: '../../../static/images/net.png'
					}
				],
				// 下拉选择服务器
				server: '',
				// 服务器列表
				serverList: [],
				// 报警条件
				alarmType: '',
				// 报警条件列表
				alarmTypeList: [],
				// 告警设置列表
				alarmList: [],
				// 删除面板
				delectAlarm: false,
				// 删除uid
				deleId: '',
				// 修改面板设备图片
				editImg: '',
				// 修改uid
				editUid: ''
			}
		},
		methods: {
			// 点击删除设备报警
			del (id) {
				this.delectAlarm = true
				this.deleId = id
			},
			// 删除报警
			delAlarm () {
				this.$api.delete(0, '/sysalarm/apps/alarm/service?uid=' + this.deleId, {}, r => {
					if (r.data.code === 0) {
						this.getAlarmList()
						this.$Message.success('删除成功')
					} else {
						this.$Message.error('删除失败')
					}
				})
				this.deleId = ''
			},
			// 退出删除面板
			cancelDel () {
				this.deleId = ''
			},
			// 修改按钮
			check (item) {
				this.editImg = item.equipmentImg
				this.editUid = item.uid
				// 告警设备
				this.ModifyArr.equipmentValue = item.alarmContent
				// 服务器id
				this.ModifyArr.serverId = item.serverId
				// 服务器名称
				this.ModifyArr.serverName = item.serverName
				this.ModifyArr.policeCond = item.alarmType
				this.getselect(item.alarmType)
				this.ModifyArr.thresholdX = item.x
				this.ModifyArr.thresholdY = item.y
				this.ModifyArr.thresholdM = item.m
				if (item.alarmWay === '' || item.alarmWay === undefined || item.alarmWay === null) {
					this.ModifyArr.policeType = 'WECHAT'
				} else {
					this.ModifyArr.policeType = item.alarmWay
				}
				// 报警人id
				this.ModifyArr.id = item.alarmContactsId
				this.ModifyArr.policePerson = item.alarmContactsName
				this.modify = true
			},
			// 修改报警设置里的选择推送方式（图片）
			toggleLi (item) {
				this.ModifyArr.policeType = item
			},
			// 修改报警设置保存按钮
			handleSubmit (name) {
				// 验证
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.$api.put(0, '/sysalarm/apps/alarm/service', {
							uId: this.editUid,
							serverId: this.ModifyArr.serverId,
							serverName: this.ModifyArr.serverName,
							alarmContent: this.ModifyArr.equipmentValue,
							alarmType: this.ModifyArr.policeCond,
							X: this.ModifyArr.thresholdX,
							Y: this.ModifyArr.thresholdY,
							M: this.ModifyArr.thresholdM,
							alarmWay: this.ModifyArr.policeType,
							alarmContactsId: this.ModifyArr.id,
							alarmContactsName: this.ModifyArr.policePerson
						}, r => {
							if (r.data.code === 0) {
								this.newPolice = false
								this.getAlarmList()
								this.$Message.info('修改成功')
								this.$refs[name].resetFields()
							} else {
								this.$Message.info('修改失败')
							}
						})
						this.ModifyArr.serverId = 0
						this.ModifyArr.id = 0
						this.ModifyArr.policeType = ''
						this.ModifyArr.serverName = ''
						this.ModifyArr.equipmentValue = ''
						this.editImg = ''
						this.editUid = ''
						this.modify = false
					} else {
						this.$Message.error('内容不能为空')
					}
				})
				// this.modify = false
			},
			// 报警设备修改的取消按钮
			cancel1 () {
				this.ModifyArr.serverId = 0
				this.ModifyArr.id = 0
				this.ModifyArr.policeType = ''
				this.ModifyArr.serverName = ''
				this.ModifyArr.equipmentValue = ''
				this.editImg = ''
				this.editUid = ''
				this.$refs['Modify'].resetFields()
				this.modify = false
			},
			// 修改报警设置里面的下拉
			getselect (val) {
				this.showX = false
				this.showY = false
				this.showM = false
				if (val !== '' && val !== undefined && val !== null) {
					if (val.indexOf('X') !== -1) {
						this.showX = true
						if (val.indexOf('Y') !== -1) {
							this.showY = true
						} else {
							this.showY = false
						}
						if (val.indexOf('M') !== -1) {
							this.showM = true
						} else {
							this.showM = false
						}
					}
					if (val.indexOf('Y') !== -1) {
						this.showY = true
						if (val.indexOf('X') !== -1) {
							this.showX = true
						} else {
							this.showX = false
						}
						if (val.indexOf('M') !== -1) {
							this.showM = true
						} else {
							this.showM = false
						}
					}
					if (val.indexOf('M') !== -1) {
						this.showM = true
						if (val.indexOf('X') !== -1) {
							this.showX = true
						} else {
							this.showX = false
						}
						if (val.indexOf('Y') !== -1) {
							this.showY = true
						} else {
							this.showY = false
						}
					}
				}
			},
			// 修改联系人设置里面的下拉
			getselect1 (item) {
				for (let f = 0; f < this.peopleList.length; f++) {
					if (this.peopleList[f].username === item) {
						this.ModifyArr.id = this.peopleList[f].id
					}
				}
			},
			add () {
				this.newPolice = true
			},
			// 新增警报规则里的下拉选项
			getselect3 (val) {
				this.showXX = false
				this.showYY = false
				this.showMM = false
				if (val !== '' && val !== undefined && val !== null) {
					if (val.indexOf('X') !== -1) {
						this.showXX = true
						if (val.indexOf('Y') !== -1) {
							this.showYY = true
						} else {
							this.showYY = false
						}
						if (val.indexOf('M') !== -1) {
							this.showMM = true
						} else {
							this.showMM = false
						}
					}
					if (val.indexOf('Y') !== -1) {
						this.showYY = true
						if (val.indexOf('X') !== -1) {
							this.showXX = true
						} else {
							this.showXX = false
						}
						if (val.indexOf('M') !== -1) {
							this.showMM = true
						} else {
							this.showMM = false
						}
					}
					if (val.indexOf('M') !== -1) {
						this.showMM = true
						if (val.indexOf('X') !== -1) {
							this.showXX = true
						} else {
							this.showXX = false
						}
						if (val.indexOf('Y') !== -1) {
							this.showYY = true
						} else {
							this.showYY = false
						}
					}
				}
			},
			// 新增联系人下拉
			getselect4 (item) {
				for (let i = 0; i < this.peopleList.length; i++) {
					if (this.peopleList[i].username === item) {
						this.AddArr.id = this.peopleList[i].id
					}
				}
			},
			// 获取服务器id
			getServerId (item) {
				for (let a = 0; a < this.serverList.length; a++) {
					if (this.serverList[a].username === item) {
						this.AddArr.serverId = this.serverList[a].sId
					}
				}
			},
			// 新增报警里的选择推送方式（图片）
			toggleLi1 (item) {
				this.AddArr.policeType = item
			},
			// 新增警报保存按钮
			AddhandleSubmit (name) {
				// 验证
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.$api.post(0, '/sysalarm/apps/alarm/service', {
							uId: '',
							serverId: this.AddArr.serverId,
							serverName: this.AddArr.serverName,
							alarmContent: this.AddArr.equipmentValue,
							alarmType: this.AddArr.policeCond,
							X: this.AddArr.thresholdX,
							Y: this.AddArr.thresholdY,
							M: this.AddArr.thresholdM,
							alarmWay: this.AddArr.policeType,
							alarmContactsId: this.AddArr.id,
							alarmContactsName: this.AddArr.policePerson
						}, r => {
							if (r.data.code === 0) {
								this.newPolice = false
								this.getAlarmList()
								this.$Message.info('添加成功')
								this.$refs[name].resetFields()
							} else {
								this.$Message.info('添加失败')
							}
						})
						this.AddArr.serverId = 0
						this.AddArr.id = 0
						this.AddArr.policeType = 'WECHAT'
					} else {
						this.$Message.error('内容不能为空')
					}
				})
			},
			// 新增的关闭按钮
			cancel () {
				this.newPolice = false
				this.AddArr.serverId = 0
				this.AddArr.id = 0
				this.AddArr.policeType = 'WECHAT'
				this.$refs['AddArr'].resetFields()
			},
			// 获取服务器下拉列表
			getServerList () {
				this.$api.get(0, '/sys/v2/systemInfo/list', {}, r => {
					if (r.data.code === 0) {
						this.serverList = r.data.data
					}
				})
			},
			// 获取所有的报警条件
			getAlarmType () {
				this.$api.get(0, '/sysalarm/apps/alarm/service/alarmType/list', {}, r => {
					console.log(r)
					if (r.data.code === 0) {
						this.alarmTypeList = r.data.data
					}
				})
			},
			// 获取所有角色为admin的用户
			getUser () {
				this.$api.get(0, '/auth/user/list/rolename?roleName=admin', {}, r => {
					if (r.data.code === 0) {
						this.peopleList = r.data.data
					}
				})
			},
			// 获取所有报警列表
			getAlarmList () {
				this.$api.get(0, '/sysalarm/apps/alarm/service/list?serverName=' + this.server + '&alarmContent=' + this.equipment, {}, r => {
					if (r.data.code === 0) {
						this.alarmList = r.data.data
						for (var b = 0; b < this.alarmList.length; b++) {
							for (var c = 0; c < this.equipmentList.length; c++) {
								if (this.alarmList[b].alarmContent === this.equipmentList[c].value) {
									this.$set(this.alarmList[b], 'equipment', this.equipmentList[c].label)
									this.$set(this.alarmList[b], 'equipmentImg', this.equipmentList[c].imgSrc)
								}
							}
							for (var d = 0; d < this.alarmTypeList.length; d++) {
								if (this.alarmList[b].alarmType === this.alarmTypeList[d].value) {
									this.$set(this.alarmList[b], 'alarmtype', this.alarmTypeList[d].label)
								}
							}
							for (var e = 0; e < this.imgSrcLis.length; e++) {
								if (this.alarmList[b].alarmWay === this.imgSrcLis[e].value) {
									this.$set(this.alarmList[b], 'contact', this.imgSrcLis[e].label)
								}
							}
						}
					}
				})
			},
			// 报警设备变化
			searchEquipment () {
				this.getAlarmList()
			},
			// 服务器变化
			searchServer () {
				this.getAlarmList()
			},
			// 清空搜索条件
			delSerch () {
				this.server = ''
				this.equipment = ''
				this.getAlarmList()
			}
		},
		mounted () {
			this.getServerList()
			this.getAlarmType()
			this.getUser()
			this.getAlarmList()
		}
	}
</script>

<style scoped lang="less">
	li {
		list-style: none;
	}

	* {
		margin: 0;
		padding: 0;
	}

	a {
		text-transform: none;
		color: #000;
	}

	#AlarmSetting-main {
		width: 100%;
		height: auto;
		min-height: 530px;
		background: #fff;
		.large{
			padding: 0 30px
		}
		/*padding: 10px 0;*/
		.selectBox {
			float: right;
			margin: 20px;

			.ivu-select-item {
				padding: 7px 16px;
			}
		}

		.sensorLis {
			width: 20%;
			height: 100px;
			overflow: hidden;
			display: flex;
			align-items: center;
			margin: 0 20px;

			.imgBox {
				width: 36%;
				height: 100%;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					display: inline-block;
					width: 50%;
					height: auto;
				}
			}

			.LisText {
				display: inline-block;
				width: 45%;

				span {
					font-size: 14px;
					/*line-height: 0.5rem;*/
				}

				span:nth-child(2) {
					display: block;
					margin-top: 14px;
					font-size: 14px;
					color: #ccc;
				}
			}

			.LisAdd {
				font-size: 18px
			}
		}

		.content {
			width: 100%;
			height: auto;
			padding: 0 20px;
			overflow: hidden;

			li {
				width: 30%;
				height: 280px;
				float: left;
				border: 1px solid #d4d8e9;
				margin-right: 66px;
				margin-bottom: 20px;
				padding: 20px;
				border-radius: 4px;

				.bottom {
					width: 100%;
					height: calc(100% /2);

					.bottomText {
						width: 100%;
						height: 50%;
						overflow: hidden;
						display: flex;
						align-items: center;
						position: relative;

						.icon {
							width: 30%;
							height: 74%;
							background: #fafafa;
							border-radius: 20px;
							float: left;
							display: flex;
							justify-content: center;
							align-items: center;

							img {
								margin-right: 20px;
							}
						}

						span {
							font-size: 14px;
						}

						.ivu-icon {
							font-size: 30px;
							color: #6c6df5;
							cursor: pointer;
						}
					}
				}
			}

			li:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.top {
		width: 100%;
		height: calc(100% /2);
		display: flex;
		align-items: center;

		.ImgBox {
			width: 20%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10px;

			img {
				width: 68%;
				height: auto;
			}
		}

		.topName {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			h4,
			span {
				margin-bottom: 4px;
				font-size: 18px;
			}

			span {
				font-size: 14px;
				color: #ccc;
			}
		}
	}

	.input {
		display: flex;
		justify-content: space-between;
		margin: 20px 0;
		/*.ivu-input{*/
		/*margin-right: 10px;*/
		/*}*/
	}

	/*.ivu-form-item{*/
	/*margin-right: 12px;*/
	/*}*/
	.Options {
		height: 30px;
		line-height: 30px;
		padding-left: 16px;
	}

	.line {
		width: 100%;
		height: 30px;
		background: url("../../../static/images/line.png") center no-repeat;
	}

	.push {
		width: 100%;
		height: auto;
		margin: 20px 0;

		.pushSelect {
			width: 100%;
			height: 50px;
			margin: 30px 0;
			display: flex;
			justify-content: space-between;

			li {
				width: 30%;
				height: 100%;
				display: flex;
				justify-content: center;
				cursor: pointer;

				img {
					margin-right: 20px;
					display: block;
					width: 50px;
					height: 50px;
				}

				span {
					font-size: 14px;
					line-height: 50px;
				}
			}
		}
	}

	.from-btn {
		margin: auto;
		width: 60%;
		height: 50px;
		display: flex;
		justify-content: space-between;

		Button {
			width: 46%;
			height: 40px;
		}

		Button:nth-child(2) {
			background: #edeeff;
			border-color: #edeeff;
			color: #9a9aa6;
		}
	}

	.Modal {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.delCheck {
		width: 25%;
		height: auto;
		position: absolute;
		right: 0;

		.del {
			display: block;
			width: 30%;
			height: 40px;
			cursor: pointer;
			float: right;
			margin-right: 20px;
			background: url("../../../static/images/del1.png") center no-repeat;
			background-size: 100%;
		}

		.del:hover {
			background: url("../../../static/images/del2.png") center no-repeat;
			background-size: 70%;
		}

		.Modify {
			display: block;
			width: 30%;
			height: 40px;
			cursor: pointer;
			float: right;
			background: url("../../../static/images/Modify1.png") center no-repeat;
			background-size: 100%;
		}

		.Modify:hover {
			background: url("../../../static/images/Modify.png") center no-repeat;
			background-size: 80%;
		}

		.ivu-modal-header {
			background: #f9f9ff;
			border-bottom: 2px solid #dde1ff;
		}
	}
</style>
